<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嘀嗒 - 高保真原型</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',        // Emerald-500 (Keep for primary actions)
                        'primary-focus': '#059669',   // Emerald-600
                        'secondary': '#3B82F6',      // Blue-500 (Example for light theme accent)
                        'neutral-light': '#F3F4F6',  // Gray-100 (Light background)
                        'base-100-light': '#FFFFFF',   // White (Base page background)
                        'base-content-light': '#1F2937', // Gray-800 (Text color)
                        'base-200-light': '#E5E7EB', // Gray-200 (Slightly darker bg or borders)
                        'base-300-light': '#D1D5DB', // Gray-300 (Borders, dividers)
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #F3F4F6; /* neutral-light (Gray-100) */
            color: #1F2937; /* base-content-light (Gray-800) */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
        .iphone-frame {
            width: 390px; /* iPhone 14 Pro width */
            height: 844px; /* iPhone 14 Pro height */
            border: 12px solid #4B5563; /* Gray-600 for a light theme phone border */
            border-radius: 48px; /* Rounded corners */
            box-shadow: 0 0 30px rgba(0,0,0,0.2), inset 0 0 0 2px #9CA3AF; /* Lighter shadow and inner bezel (Gray-400) */
            overflow: hidden;
            position: relative;
            background-color: #FFFFFF; /* base-100-light (White) for phone screen background */
            margin-bottom: -168.8px; /* Compensate for scaled-out space: 844px * (1 - 0.8) */
            margin-left: 0.5rem; 
            margin-right: 0.5rem; 
            margin-top: 0.5rem; 
            transform: scale(0.8); 
            transform-origin: top center; 
        }
        .iphone-frame iframe {
            width: 100%;
            height: 100%;
            border: none;
            padding-top: 28px; /* Added padding for notch */
            box-sizing: border-box; /* Ensure padding is included in height */
        }
        .iphone-notch {
            position: absolute;
            top: 12px; /* Position notch correctly */
            left: 50%;
            transform: translateX(-50%);
            width: 150px; /* Notch width */
            height: 28px; /* Notch height */
            background: #4B5563; /* Match phone border (Gray-600) */
            border-radius: 0 0 18px 18px; /* Rounded bottom */
            z-index: 1; /* Lower z-index so iframe content can be above if needed */
        }
        .prototype-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(calc(390px * 0.8 + 2rem), 1fr)); /* Responsive grid, considering scale and margin */
            gap: 1rem;
            padding: 2rem;
            justify-items: center;
        }
        .prototype-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .prototype-title {
            margin-top: -0.25rem; /* Further increase overlap */
            font-weight: 500;
            color: #4B5563; /* gray-600 */
        }
    </style>
</head>
<body class="antialiased bg-base-100-light text-base-content-light">
    <header class="bg-base-100-light p-6 shadow-lg sticky top-0 z-50 border-b border-base-300-light">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-3xl font-bold text-primary"><i class="fas fa-stream mr-2"></i>嘀嗒 - 应用原型概览 (已更新)</h1>
            <p class="text-sm text-gray-500">目标平台: iOS (iPhone 14 Pro 模拟) - 明亮主题</p>
        </div>
    </header>

    <main class="container mx-auto mt-4">
        <div class="prototype-grid" id="prototype-grid">
            <!-- Prototypes will be injected here by JavaScript -->
        </div>
    </main>

    <footer class="text-center p-6 mt-8 text-gray-600 text-sm">
        <p>嘀嗒 App 高保真 HTML 原型. 使用 Tailwind CSS, FontAwesome. 图片来源: Unsplash, Pexels.</p>
        <p>&copy; 2024 UI/UX Agent. All rights reserved.</p>
    </footer>

    <script>
        const prototypes = [
            { title: "习惯打卡", file: "home_habits.html" },
            { title: "待办事项", file: "home_todos.html" },
            { title: "个人财务", file: "home_finance.html" },
            { title: "时间管理", file: "home_time.html" },
            { title: "数据统计", file: "home_stats.html" },
            { title: "设置", file: "settings.html" },
            { title: "创建习惯", file: "habit_create.html" },
            { title: "创建待办", file: "todo_create.html" },
            { title: "创建财务记录", file: "finance_create.html" },
            { title: "记录时间", file: "time_create.html" },
        ];

        const grid = document.getElementById('prototype-grid');

        prototypes.forEach(proto => {
            const container = document.createElement('div');
            container.className = 'prototype-container';

            const frame = document.createElement('div');
            frame.className = 'iphone-frame';

            const notch = document.createElement('div');
            notch.className = 'iphone-notch';

            const iframe = document.createElement('iframe');
            iframe.src = proto.file;
            iframe.title = proto.title;
            // Consider adding sandbox attributes for security if content is less trusted
            // iframe.sandbox = "allow-scripts allow-same-origin"; 

            frame.appendChild(notch);
            frame.appendChild(iframe);
            container.appendChild(frame); // Append frame directly to container

            const titleElement = document.createElement('p');
            titleElement.className = 'prototype-title';
            titleElement.textContent = proto.title;
            container.appendChild(titleElement); // Append title directly to container

            grid.appendChild(container);
        });
    </script>

</body>
</html>